<template>
  <div class="box">
    <ul>
      <li>
        <router-link to="/lists">
          <img src="/cimgs/list1.jpg" alt="" />
        </router-link>
      </li>
      <li><img src="/cimgs/list2.jpg" alt="" /></li>
      <li><img src="/cimgs/list3.jpg" alt="" /></li>
      <li><img src="/cimgs/list4.jpg" alt="" /></li>
      <li><img src="/cimgs/list5.jpg" alt="" /></li>
      <li><img src="/cimgs/list6.jpg" alt="" /></li>
      <li><img src="/cimgs/list7.jpg" alt="" /></li>
      <li><img src="/cimgs/list8.jpg" alt="" /></li>
    </ul>
    <div>
      <img src="/cimgs/1.jpg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigation",
  data() {
    return {};
  },
};
</script>

<style scoped>
.box {
  width: 90%;
  margin: 0 auto;
}
ul {
  width: 100%;
  height: 2rem;
  background-color: #fafefd;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
}
ul > li img {
  width: 0.7rem;
  height: 0.85rem;
}
div > img {
  width: 100%;
}
</style>